<template>
  <div id="myDiv" ref="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "about",
  data() {
    return {
      kData: [
        [20, 34, 10, 38],
        [40, 35, 30, 50],
        [31, 38, 33, 44],
        [38, 15, 5, 42],
      ],
    };
  },
  computed: {
    OnekData() {
      let list = this.kData.map((v) => v[0]);
      return list;
    },
  },
  mounted() {
    // 1.初始化
    let myChart = echarts.init(this.$refs.myChart);

    // 2.设置echarts数据
    let option = {
      title: {
        text: "主标题",
      },
      xAxis: {
        data: ["2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27"],
      },
      yAxis: {},
      tooltip: {
        trjgger: "axis",
        axisPointer: { type: "cross" },
      },
      series: [
        {
          type: "candlestick",
          data: this.kData,
          itemStyle: {
            color: "skyblue", // 上涨颜色
            color0: "pink", // 下跌颜色
            borderColor: "red",
            borderColor0: "skyblue",
          },
          markPoint: {
            data: [
              {
                name: "最大值",
                type: "max",
                valueDim: "highest", // 哪个维度上面进行最大值最小值的设置
              },
              {
                name: "最小值",
                valueDim: "lowest", // 哪个维度上面进行最大值最小值的设置
                type: "min",
              },
              {
                name: "平均值",
                valueDim: "close", // 哪个维度上面进行最大值最小值的设置
                type: "average",
              },
            ],
          },
        },
        {
          type: "line",
          smooth: true,
          data: this.OnekData,
        },
      ],
    };
    // 4.绘制图标
    myChart.setOption(option);
  },
};
</script>

<style>
#myDiv {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>